<template>
	<view class="app-container">
		<me-scroll :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit">
		<block v-for="item in moddityList" :key="item.id">
			<moddity-card :item="item"></moddity-card>
		</block>
		</me-scroll>
	</view>
</template>

<script>
	import { getInfo } from '@/common/api/home/index.js';
	import ModdityCard from "@/components/ModdityCard/index.vue";
	import MeScroll from 'mescroll-uni'
	export default {
		data() {
			return {
				moddityList: '',
				mescroll: null, // mescroll实列对象
				downOption: {
					use:true
				},
				upOption:{ // 上拉加载配置
					
				}
			};
		},
		onReachBottom() { // 必须注册滚动到底部的事件,使上拉加载生效
			this.mescroll && this.mescroll.onReachBottom();
		},
		onPageScroll(e) { // 必须注册列表滚动事件,使下拉刷新生效
				this.mescroll && this.mescroll.onPageScroll(e);
		},
		components: {
			ModdityCard,
			MeScroll
		},
		onLoad() {
			this.getModdityList();
		},
		methods: {
			getModdityList() { // 获取商品列表
				getInfo()
					.then(({
						code,
						msg,
						data
					}) => {
						if (code === 200) {
							const {
								list,
								total
							} = { ...data
							}
							this.moddityList = list
							console.log(list);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll){
				console.log(mescroll);
				mescroll.resetUpScroll(); // 重置为第一页 
			},
			upCallback(mescroll) {
				console.log(mescroll);
			}
		}
	};
</script>

<style></style>
